<template>
  <div class="app-container">
    <el-row class="search">
      <el-date-picker v-model="query.stime" style="width:150px" type="date" placeholder="开始">
      </el-date-picker>
      <span>-</span>
      <el-date-picker style="width:150px" v-model="query.etime" type="date" placeholder="结束">
      </el-date-picker>

      <el-select
        v-model="grp"
        multiple
        collapse-tags
        style="margin-left: 8px; width: 120px"
        placeholder="分组"
        @change="grpChange"
      >
        <el-option
          v-for="item in [
            { label: 'DRG组', value: '分组编码,分组名称' },
            { label: 'MDC', value: 'MDC专业,MDC中文名称' },
            { label: '科室', value: '科室' },
            { label: '医生', value: '医生' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="query.deptValue"
        style="margin-right: 8px; margin-left: 8px; width: 120px"
        placeholder="科室"
      >
        <el-option
          v-for="item in deptLs"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="query.size"
        style="margin-right: 8px; width: 120px"
        placeholder="TOPN"
      >
        <el-option
          v-for="item in [
            { label: '排名前5', value: '5' },
            { label: '排名前10', value: '10' },
            { label: '排名前20', value: '20' },
            { label: '排名前30', value: '30' },
            { label: '排名前50', value: '50' },
            { label: '排名前100', value: '100' },
            { label: '排名前200', value: '200' },
            { label: '排名前500', value: '500' },
            { label: '排名前1000', value: '1000' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span style="margin-left: 5px">按</span>
      <el-select
        v-model="query.o"
        style="margin-right: 8px; width: 120px"
        placeholder="排序"
      >
        <el-option
          v-for="item in [
            { label: '病例数', value: '病例数' },
            { label: '总费用', value: '总费用' },
            { label: '标杆总费用', value: '标杆总费用' },
            { label: 'CMI', value: 'CMI' },
            { label: '时间消耗', value: '时间消耗' },
            { label: '费用消耗', value: '费用消耗' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="query.x"
        style="margin-right: 8px; width: 120px"
        placeholder="排序"
      >
        <el-option
          v-for="item in [
            { label: '降序', value: 'DESC' },
            { label: '升序', value: 'ASC' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-input
        v-model="query.s"
        prefix-icon="el-icon-search"
        style="width: 250px"
        :placeholder="searchText"
        @keyup.enter.native="search"
      ></el-input>

      <el-button type="warning" style="margin-left: 8px" @click="search" round
        >搜&nbsp;&nbsp;索</el-button
      >
    </el-row>

    <el-row>
      <el-table
        :data="ls"
        style="width: 100%"
        v-loading="isLoading"
        highlight-current-row
      >
        <el-table-column
          v-for="item in cols"
          :key="item"
          :label="item"
          :prop="item"
          fixed
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="病例数" label="病例数"> </el-table-column>
        <el-table-column
          prop="总费用"
          label="总费用"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆总费用"
          label="标杆总费用"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="药品费"
          label="药品费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆药品费"
          label="标杆药品费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="床日" label="床日"> </el-table-column>
        <el-table-column
          prop="标杆床日"
          label="标杆床日"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="检验费"
          label="检验费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆检验费"
          label="标杆检验费"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="检查费"
          label="检查费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆检查费"
          label="标杆检查费"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="耗材费"
          label="耗材费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆耗材费"
          label="标杆耗材费"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="手术费"
          label="手术费"
          :formatter="fmt"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="标杆手术费"
          label="标杆手术费"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="CMI"
          label="CMI"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="时间消耗"
          label="时间消耗"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="费用消耗"
          label="费用消耗"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="得分"
          label="得分"
          :formatter="fmt"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="平均得分"
          label="平均得分"
          :formatter="fmt"
          width="100"
        ></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Format } from "@/utils/Utils";
import { dept } from "@/api/patient";
import { costLs } from "@/api/report";
@Component({
  name: "abs",
})
export default class extends Vue {
  private grp = ["MDC专业,MDC中文名称"];
  private query = {
    stime: "",
    etime: Format("yyyy-MM-dd", new Date()),
    s: "",
    grp: "分组编码,分组名称",
    size: "10",
    o: "病例数",
    deptValue: "",
    x: "DESC",
    order: "",
    w: "",
  };

  private fmt(row: any, col: any, val: any) {
    if (!val) return val;

    return val.toFixed(2);
  }
  private deptLs: Array<any> = [];

  public async dept() {
    let curDate = new Date();
    let t = `${Format("yyyyMMddh", curDate)}${parseInt(
      curDate.getMinutes() / 5 + ""
    )}`;
    let d: any = await dept({ t: t });
    d = d.data || [];
    this.deptLs = [
      { text: "所有科室", value: "" },
      ...d.map((it: any) => ({ text: it, value: it })),
    ];
  }

  private search() {
    this.costLs();
  }
  private created() {
    let cDate = new Date();
    cDate.setMonth(parseInt((<any>window).MyConf["TIMEINTERVAL"] || "1") * -1);
    this.query.stime = Format("yyyy-MM-dd", cDate);

    this.grpChange();

    this.dept();

    this.costLs();
  }

  private ls: Array<any> = [];

  private cols: Array<any> = this.grp.join(",").split(",");

  private searchText = "";
  private grpChange() {
    
    this.searchText = this.grp.join(',').split(',').map((it: string) => `${it}`).join("、");
  }

  private isLoading: boolean = true;
  private async costLs() {
    this.isLoading = true;

    this.cols = this.grp.join(",").split(",");

    if (!this.grp || this.grp.length == 0) return;

    this.query.grp = this.grp.join(",");
    this.query.order = `${this.query.o} ${this.query.x}`;

    this.query.w = "1=1";
    if (this.query.deptValue) {
      this.query.w += ` AND 科室='${this.query.deptValue}'`;
    }
    if (this.query.s) {
      let p = this.cols
        .map((it: any) => `${it} like '${this.query.s}'`)
        .join(" OR ");
      this.query.w += ` AND (${p})`;
    }
    let d: any = await costLs(this.query);
    d = d.data;
    this.ls = d;
    this.isLoading = false;
  }
}
</script>

<style lang="scss">
</style>